<!-- <template>
  <h2>组合式api</h2>
  <button @click="minus">-</button>
  <span>{{ count }}</span>
  <button @click="add">+</button>
  <span>doubleCount: {{ doubleCount }}</span>

  <hr />

  <ul>
    <li v-for="item in list" :key="item._id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      list: [],
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    add() {
      this.count++;
    },
    minus() {
      this.count--;
    },
    getData() {
      fetch("http://www.pudge.wang:3080/api/rated/list")
        .then((response) => response.json())
        .then((res) => {
          this.list = res.result;
        });
    },
  },
};
</script> -->

<template>
  <h2>组合式api</h2>
  <button @click="minus">-</button>
  <span>{{ count }}</span>
  <button @click="add">+</button>

  <hr />

  <ul>
    <li v-for="item in list" :key="item._id">{{ item.title }}</li>
  </ul>
</template>

<script>
// import { ref, onMounted } from "vue";
import counter from "@/hooks/useCounter";
import movies from "@/hooks/useMovies";

export default {
  // setup就是组合式api的入口
  // setup也是组件的一个生命周期，最早调用，里面获取不到this
  setup() {
    // console.log("setup", this);

    const [count, add, minus] = counter(5);
    const list = movies();

    // 如果setup里面定义的内容，希望在template里面用，是需要return的
    return {
      count,
      add,
      minus,
      list,
    };
  },
};
</script>
